<template>
    <div class="container">
        <div class="login">
            <h3>锅圈后台管理系统</h3>
            <!-- 
                :model绑定表单数据
                因为form表单是根据model绑定数据来判断表单里面的数据
                当没有绑定时，form表单的数据始终为空
             -->
            <el-form :rules="rules" :model="info" ref="formrules">
                <el-form-item label="账号：" prop="username">
                    <el-input placeholder="请输入用户名" clearable v-model="info.username">
                        <template #prefix>
                            <svg class="icon">
                                <use xlink:href="#icon-dengluzhanghao"></use>
                            </svg>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="info.password" type="password" placeholder="请输入密码" show-password clearable>
                        <template #prefix>
                            <svg class="icon">
                                <use xlink:href="#icon-mima"></use>
                            </svg>
                        </template>
                    </el-input>

                </el-form-item>
                <el-button type="primary" class="btn" @click="submitForm(formrules)">登陆</el-button>
            </el-form>
            <router-link to="/register" class="change">注册</router-link>
        </div>
    </div>
</template>

<script lang="ts" setup>
// vue2组件里面的data一定是一个函数
// 响应式
// reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。
// 而另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import http from '../tools/axios';
const info = ref({
    username: 'admin',
    password: '123456'
})

// trigger: 'blur' 是一种用于表单验证的触发器，它表示在失去焦点时触发验证。
// 当用户输入完表单字段后，移动焦点到其他地方时，
// 会自动触发验证，以便检查输入是否符合要求
const rules = ref({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 10, message: '账号长度为3~10', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 10, message: '密码长度为3~10', trigger: 'blur' },
    ]

})

const router = useRouter()
const formrules = ref(null)

const submitForm = (formEl) => {
    // 登陆提交表单验证
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            // 使用axios向后端发送请求
            http.post('/product/login', info.value).then((res) => {
                console.log(res.data);

                if (res.data.code === 404) {
                    console.log(res.data);
                    ElMessage({
                        showClose: true,
                        message: '用户名或密码错误',
                        type: 'warning',
                    })
                }
                else {
                    const token = res.data.token;
                    // 存储令牌到本地
                    sessionStorage.setItem('token', token);
                    console.log("token",token);
                    
                    console.log(res.data);
                    ElMessage({
                        showClose: true,
                        message: '登陆成功',
                        type: 'success',
                    })
                    // push 跳转路由
                    // push点击登陆后，可以通过浏览器的回退到登陆界面
                    // replace 
                    // 替换路由，不会回退到登陆界面
                    router.replace('/control')
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


</script>

<style scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/login.jpg');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    width: 450px;
    box-sizing: border-box;
    padding: 20px 60px;

    /* display: flex;
    flex-direction: column;
    align-items: center; */
    /* 边框阴影 */
    /* box-shadow: 0 0 10px #ccc; */
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.login h3 {
    text-align: center;
}

.icon {
    width: 20px;
    height: 20px;
}

.btn {
    width: 330px;
    height: 35px;
    border-radius: 25px;
    /* 字体间距 */
    letter-spacing: 3px;
}

.change {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>